import { PageHeader, Card, List, Typography } from 'antd';
import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'umi';
import styles from './style.less';
import ProjectIcon from '@/components/projectIcon';
import tools from './tools'

const { Paragraph } = Typography;

class ToolBoard extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
  }

  render() {
    const toolsList = tools;
    const nullData = {};
    const clickTool = (tools) => {
      console.log(tools.item.linkUrl)
      window.open(tools.item.linkUrl);
    }
    return (
      <>
        <PageHeader className={styles.pageHeader} title="工具" subTitle="程序猿实用工具集">

        </PageHeader>
        <div className={styles.cardList}>
          <List
            rowKey="id"
            grid={{
              gutter: 16,
              xs: 1,
              sm: 2,
              md: 3,
              lg: 3,
              xl: 4,
              xxl: 4,
            }}
            dataSource={[...toolsList]}
            renderItem={(item) => {
              return (
                <List.Item key={item.id}>

                  <Card
                    hoverable
                    className={styles.card}
                    onClick={() => clickTool({ item })}
                  >
                    <Card.Meta
                      avatar={<div className={styles.cardAvatar}><ProjectIcon type={item.icon} /></div>}
                      title={<a>{item.title}</a>}
                      description={
                        <Paragraph
                          className={styles.item}
                          ellipsis={{
                            rows: 3,
                          }}
                        >
                          {item.description}
                        </Paragraph>
                      }
                    />
                  </Card>
                </List.Item>
              );
            }
            }
          />
        </div>
      </>
    );
  }
}

export default connect(({ state }) => ({
  state
}))(ToolBoard);
